<template>
  <div class="return-material">
    <!-- 搜索区 -->
    <el-card class="mb-4" shadow="never">
      <el-form :inline="true" :model="searchForm" size="small">
        <el-form-item label="退料单编号">
          <el-input v-model="searchForm.code" clearable placeholder="退料单编号" />
        </el-form-item>
        <el-form-item label="工单">
          <el-input v-model="searchForm.orderNo" clearable placeholder="工单编号" />
        </el-form-item>
        <el-form-item label="仓库">
          <el-input v-model="searchForm.warehouse" clearable placeholder="仓库" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="openDialog('add')">新增退料单</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 退料单表格 -->
    <el-table :data="filteredData" border style="width:100%;">
      <el-table-column prop="code" label="退料单编号" width="140" />
      <el-table-column prop="name" label="退料名称" width="150" />
      <el-table-column prop="orderNo" label="工单" width="120" />
      <el-table-column prop="warehouse" label="仓库" width="110" />
      <el-table-column prop="date" label="退料日期" width="120" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="150">
        <template #default="{ row, $index }">
          <el-button size="small" @click="openDialog('edit', row, $index)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete($index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogMode==='add'?'新增退料单':'编辑退料单'" v-model="showDialog" width="430px">
      <el-form :model="dialogForm" :rules="dialogRules" ref="dialogFormRef" label-width="90px">
        <el-form-item label="退料单编号" prop="code">
          <el-input v-model="dialogForm.code" :disabled="dialogMode==='edit'" />
        </el-form-item>
        <el-form-item label="退料名称" prop="name">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
        <el-form-item label="工单" prop="orderNo">
          <el-input v-model="dialogForm.orderNo" />
        </el-form-item>
        <el-form-item label="仓库" prop="warehouse">
          <el-input v-model="dialogForm.warehouse" />
        </el-form-item>
        <el-form-item label="退料日期" prop="date">
          <el-date-picker v-model="dialogForm.date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width:100%;" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dialogForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="submitDialog">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'

// 模拟数据
const allData = ref(generateMock())
function generateMock() {
  const names = ['生产多余原料', '包装材料', '工艺损耗', '质检不合格品', '返修剩余品']
  const warehouse = ['主仓库', '原料仓', '辅料仓', '成品仓']
  const arr = []
  for (let i = 0; i < 15; i++) {
    arr.push({
      code: `TL${20240601 + i}`,
      name: names[i % names.length],
      orderNo: 'GD20250' + ((i % 10) + 1),
      warehouse: warehouse[i % warehouse.length],
      date: `2025-06-${String((i % 29) + 1).padStart(2, '0')}`,
      remark: i % 4 === 0 ? '异常退料' : ''
    })
  }
  return arr
}

// 搜索相关
const searchForm = reactive({ code: '', orderNo: '', warehouse: '' })
const filteredData = computed(() =>
  allData.value.filter(row =>
    (!searchForm.code || row.code.includes(searchForm.code)) &&
    (!searchForm.orderNo || row.orderNo.includes(searchForm.orderNo)) &&
    (!searchForm.warehouse || row.warehouse.includes(searchForm.warehouse))
  )
)
function handleSearch() { }
function resetSearch() {
  searchForm.code = ''
  searchForm.orderNo = ''
  searchForm.warehouse = ''
}

// 增删改相关
const showDialog = ref(false)
const dialogMode = ref('add') // add / edit
const dialogForm = reactive({
  code: '', name: '', orderNo: '', warehouse: '', date: '', remark: ''
})
const dialogRules = {
  code: [{ required: true, message: '必填', trigger: 'blur' }],
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  orderNo: [{ required: true, message: '必填', trigger: 'blur' }],
  warehouse: [{ required: true, message: '必填', trigger: 'blur' }],
  date: [{ required: true, message: '必填', trigger: 'change' }]
}
const dialogFormRef = ref()
let editingIdx = -1
function openDialog(mode, row, idx) {
  dialogMode.value = mode
  if (mode === 'add') {
    Object.assign(dialogForm, {
      code: '', name: '', orderNo: '', warehouse: '', date: '', remark: ''
    })
  } else {
    Object.assign(dialogForm, { ...row })
    editingIdx = idx
  }
  showDialog.value = true
  nextTick(() => dialogFormRef.value && dialogFormRef.value.clearValidate())
}
function submitDialog() {
  dialogFormRef.value.validate(valid => {
    if (!valid) return
    if (dialogMode.value === 'add') {
      allData.value.unshift({ ...dialogForm })
      ElMessage.success('新增成功')
    } else {
      allData.value.splice(editingIdx, 1, { ...dialogForm })
      ElMessage.success('编辑成功')
    }
    showDialog.value = false
  })
}
function handleDelete(idx) {
  allData.value.splice(idx, 1)
  ElMessage.success('已删除')
}
</script>

<style scoped>
.return-material {
  padding: 20px 16px;
}
.mb-4 { margin-bottom: 16px; }
</style>
